<template>
  <lb-layout
    v-loading="$store.getters.loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="#a19f9fb0;"
    :paddBottom="5"
  >
    <el-form ref="queryForm" :inline="true" :model="form" label-width="auto">
      <el-form-item v-if="$route.query.type == 2" label="区域:" prop="deptId">
        <el-select
          v-model="form.deptId"
          placeholder="请选择区域"
          :style="{ width: '100%' }"
          clearable
        >
          <el-option
            v-for="(item, i) in deptArr"
            :key="i"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="年份:" prop="year">
        <el-date-picker
          v-model="form.year"
          type="year"
          placeholder="请选择年份"
          size="small"
          :value-format="'yyyy'"
          :picker-options="pickeroOptions"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="时段类型:" prop="periodType">
        <el-select
          v-model="form.periodType"
          placeholder="请选择时段类型"
          :style="{ width: '100%' }"
          clearable
        >
          <el-option label="月报" value="0" />
          <el-option label="季报" value="1" />
          <el-option label="半年" value="2" />
          <el-option label="全年" value="3" />
        </el-select>
      </el-form-item>
      <el-form-item label="时段:" prop="period">
        <el-select
          v-model="form.period"
          placeholder="请选择时段"
          :style="{ width: '100%' }"
          clearable
        >
          <el-option
            v-for="(item, i) in list"
            :key="i"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="单位名称:" prop="deptId">
        <el-select
          size="small"
          v-model="form.deptId"
          disabled
          placeholder="请选择单位名称"
          filterable
          @change="handlerChange"
        >
          <el-option
            v-for="(item, index) in showDeptArr"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select> -->

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="small"
          @click="handleQuery"
        >
          搜索
        </el-button>
        <el-button icon="el-icon-refresh" size="small" @click="resetQuery">
          重置
        </el-button>

        <el-button type="warning" size="small" plain @click="exportDeal"
          >导出</el-button
        >
        <el-button size="small" @click="goBack"> 返回 </el-button>
      </el-form-item>
    </el-form>

    <el-tabs
      ref="tabs"
      v-model="activeName"
      class="text-tabs TTB-no-gutter TTB-gutter"
      @tab-click="handlerTabschange"
    >
      <el-tab-pane label="综1表" name="basic1" ref="basic1"></el-tab-pane>
      <el-tab-pane label="综2表" name="basic2" ref="basic2"></el-tab-pane>
      <el-tab-pane label="综3表" name="basic3" ref="basic3"></el-tab-pane>
      <el-tab-pane label="综4表" name="basic4" ref="basic4"></el-tab-pane>
    </el-tabs>
    <component :is="activeName" :ref="activeName"></component>
  </lb-layout>
</template>
  
    <script>
import { exportBasicExcel, exportExcel } from "@/utils/xlsx";
import { getARdeptlist } from "@/api/standingbook/newstandingbook.js";
import { getInfo } from "@/api/login";
import basic1 from "@/views/work/accounts/report/components/basic1.vue";
import basic2 from "@/views/work/accounts/report/components/basic2.vue";
import basic3 from "@/views/work/accounts/report/components/basic3.vue";
import basic4 from "@/views/work/accounts/report/components/basic4.vue";
export default {
  components: {
    basic1,
    basic2,
    basic3,
    basic4,
  },
  props: {},
  data() {
    return {
      deptArr: [],
      form: {
        deptId: null,
        year: "",
        periodType: "3",
        period: "全年",
      },
      pickeroOptions: {
        disabledDate(time) {
          let date = new Date();
          return time.getFullYear() > date.getFullYear();
        },
      },
      list: [{ label: "全年", value: "全年" }],
      deptLevel: null,
      activeName: "basic1",
      disabledFlage: false,
      isCorrect: false,
      apsForm: {
        formRef: "searchform",
        labelWidth: "auto",
        formData: {},
        formConfig: {
          formAttr: {
            inline: true,
            size: "small",
          },
          properties: {
            companyName: {
              label: "单位名称：",
              typeName: "aps-des",
            },
            fillType: {
              label: "填报类型：",
              typeName: "aps-des",
            },
            yearmonth: {
              label: "时间段：",
              typeName: "aps-des",
            },
          },
        },
      },
      buttonName: "",
    };
  },
  watch: {
    // eslint-disable-next-line func-names
    "form.periodType": function (val) {
      let arr = [];
      switch (val) {
        case "0":
          arr = [
            { label: "01月", value: "01月" },
            { label: "02月", value: "02月" },
            { label: "03月", value: "03月" },
            { label: "04月", value: "04月" },
            { label: "05月", value: "05月" },
            { label: "06月", value: "06月" },
            { label: "07月", value: "07月" },
            { label: "08月", value: "08月" },
            { label: "09月", value: "09月" },
            { label: "10月", value: "10月" },
            { label: "11月", value: "11月" },
            { label: "12月", value: "12月" },
          ];
          break;
        case "1":
          arr = [
            { label: "第一季度", value: "第一季度" },
            { label: "第二季度", value: "第二季度" },
            { label: "第三季度", value: "第三季度" },
            { label: "第四季度", value: "第四季度" },
          ];
          break;
        case "2":
          arr = [
            { label: "上半年", value: "上半年" },
            { label: "下半年", value: "下半年" },
          ];
          break;
        case "3":
          arr = [{ label: "全年", value: "全年" }];
          break;
      }
      this.list = arr;
      this.form.period = arr[0].value;
    },
  },
  created() {
    this.requestDeptarr();
    this.getDeptLevel();
  },
  mounted() {
    setTimeout(() => {
      this.getFormreset();
      this.$nextTick(() => {
        this.handleQuery();
      });
    }, 200);
  },
  methods: {
    requestDeptarr() {
      this.deptArr = [];
      getARdeptlist()
        .then((res) => {
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          let arr = res?.data ?? [];
          if (arr.length > 0) {
            arr.map((item) => {
              let obj = {
                label: item?.deptName ?? "",
                value: item?.deptId,
              };
              this.deptArr.push(obj);
            });
          }
        })
        .catch(() => {
          // this.$message.error("系统错误,请联系管理员!");
        });
    },
    getFormreset() {
      let query = this.$route.query;
      if (query.type == 2 && this.deptArr.length > 0) {
        this.form.deptId = this.deptArr[0].value;
      } else {
        this.form.deptId = this.$store.state.user.deptId;
      }
      let now = new Date().getFullYear();
      this.form.year = String(now);
    },
    handleQuery() {
      this.$refs[this.activeName].getData(this.form);
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.getFormreset();
      this.handleQuery();
    },
    exportDeal() {
      let user = this.$store.state.user;
      let deptName = user?.deptName ?? "未知单位名称";
      let infos = [];
      infos.push(deptName ?? "");
      infos.push(this.$route.query?.unitLeader ?? "");
      infos.push(this.$route.query?.statisticLeader ?? "");
      infos.push(this.$route.query?.createTime ?? "");
      if (this.$route.query.year && this.$route.query.month) {
        infos.push(this.$route.query?.year + this.$route.query?.month);
      } else {
        infos.push("");
      }
      infos.push("报");
      let fileName =
        this.activeName == "basic1"
          ? "公共机构能源资源消费统计分级汇总情况"
          : this.activeName == "basic2"
          ? "公共机构能源资源消费统计分类汇总情况"
          : this.activeName == "basic3"
          ? "公共机构数据中心机房能源消费统计汇总情况"
          : "公共机构采暖能源资源消费统计汇总情况";
      let index =
        this.activeName == "basic1"
          ? 5
          : this.activeName == "basic2"
          ? 6
          : this.activeName == "basic3"
          ? 7
          : 8;
      let cols = [{ wpx: 240 }];
      let ref = this.$refs[this.activeName].$refs.excelTable;
      //exportExcel(ref, fileName, cols);
      exportBasicExcel(ref, fileName, cols, index, infos);
    },
    async getDeptLevel() {
      const res = await getInfo();
      this.deptLevel = res.user.deptLevel;
    },
    handlerTabschange() {
      const name = this.$refs.tabs.value;
      if (this.activeName === name) {
        return false;
      }
      this.$nextTick(() => {
        this.handleQuery();
      });
    },
    goBack() {
      // this.$router.push({
      //   path: "/work/standbook",
      // });
      this.$router.go(-1);
      // let activeMenu = this.$route.meta.activeMenu; // 激活的菜单也是返回的菜单
      // this.$router.push({
      //   path: activeMenu,
      // });
    },
    handlerSaveandReport() {
      this.$refs.basic2.parentTelltodo();
    },
  },
};
</script>
  
    <style lang="scss" scoped>
.text-tabs {
  margin-left: -40px;
  margin-bottom: 20px;
}
.top-button-area {
  display: flex;
  justify-content: flex-end;
}
::v-deep .el-form-item {
  margin-bottom: 10px;
  .el-input__inner {
    width: 180px;
  }
}
</style>
  